<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" href="/iconfont/iconfont.css" />
      <script src="/iconfont/iconfont.js"></script>
    <title>导航验证演示舰端</title>
  </head>
  <body>
    <div id="app">
      <style>
        .loading-wrap {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
        }

        .balls {
          width: 4em;
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          justify-content: space-between;
        }

        .balls div {
          width: 0.8em;
          height: 0.8em;
          border-radius: 50%;
          background-color: #4b9e5f;
        }

        .balls div:nth-of-type(1) {
          transform: translateX(-100%);
          animation: left-swing 0.5s ease-in alternate infinite;
        }

        .balls div:nth-of-type(3) {
          transform: translateX(-95%);
          animation: right-swing 0.5s ease-out alternate infinite;
        }

        @keyframes left-swing {

          50%,
          100% {
            transform: translateX(95%);
          }
        }

        @keyframes right-swing {
          50% {
            transform: translateX(-95%);
          }

          100% {
            transform: translateX(100%);
          }
        }
      </style>
      <div class="loading-wrap">
        <div class="balls">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
